<template>
  <div>
    <el-page-header @back="goBack"></el-page-header>
    <div class="top-command">
      <div class="tit">分润结算</div>
      <div class="btn-area">
        <el-button style="width: 120px">取消</el-button>
        <el-button type="primary" style="width: 120px" @click="submit"
          >提交</el-button
        >
      </div>
    </div>
    <el-card style="min-width: 1200px; margin-bottom: -5px; margin-top: 15px">
      <div class="cardTit">结算方式</div>
      <div class="content" style="margin-top: 16px; margin-bottom: 16px">
        <el-button
          :class="item.value == curIdx ? 'actived' : ''"
          plain
          v-for="(item, idx) of btns"
          :key="idx"
          @click="btnChange(item, idx)"
          >{{ item.label }}</el-button
        >
      </div>
      <div class="cardTit" v-if="curIdx == 'wechat'">付款渠道</div>
      <div class="content" v-if="curIdx == 'wechat'" style="margin-top: 16px">
        <el-button
          :class="item.value == curIdx1 ? 'actived' : ''"
          plain
          v-for="(item, idx) of btns1"
          :key="idx"
          @click="btnChange1(item, idx)"
          >{{ item.label }}</el-button
        >
      </div>
    </el-card>
    <el-card style="min-width: 1200px; margin-bottom: -5px; margin-top: 15px">
      <div class="cardTit">结算信息</div>
      <div class="content" style="margin-top: 16px">
        <div class="total">
          <div>
            结算总金额&nbsp;&nbsp;<span
              style="font-family: GothamSSm, GothamSSm; color: #1d1c1c"
              >￥{{ info.amount || 0 }}</span
            >
          </div>
          <div>
            结算总笔数&nbsp;&nbsp;<span
              style="font-family: GothamSSm, GothamSSm; color: #1d1c1c"
              >{{ info.count || 0 }}</span
            >
          </div>
          <div>
            分润接收方&nbsp;&nbsp;<span
              style="font-family: GothamSSm, GothamSSm; color: #1d1c1c"
              >{{ info.receiveCount || 0 }}</span
            >
          </div>
        </div>
        <el-tabs
          v-model="activeKey"
          @tab-click="tabClick"
          style="margin-top: 16px"
        >
          <el-tab-pane
            :label="`有效订单(${effectOrder})`"
            name="1"
          ></el-tab-pane>
          <el-tab-pane
            :label="`无效订单(${invalidOrder})`"
            name="2"
          ></el-tab-pane>
        </el-tabs>

        <el-table :data="dataList">
          <template slot="empty">
            <el-empty
              :image="require('@/assets/imgs/middleWork/k1.png')"
              :image-size="80"
              description="暂无相关数据"
            ></el-empty>
          </template>
          <el-table-column
            show-overflow-tooltip
            prop="number"
            align="center"
            label="序号"
          >
            <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ scope.row.number ? scope.row.number : "-" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="incomeAmountTotal"
            align="center"
            label="分润接收方"
          >
            <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ scope.row.receive ? scope.row.receive : "-" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="incomeAmountTotal"
            align="center"
            label="分润总笔数"
          >
            <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ scope.row.settleCount ? scope.row.settleCount : "-" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="incomeAmountTotal"
            sortable
            align="center"
            label="分润总金额/元"
          >
            <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ scope.row.settleAmount ? scope.row.settleAmount : "-" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="incomeAmountTotal"
            align="center"
            label="收款账户"
          >
            <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{
                  scope.row.receiveAccount
                    ? scope.row.receiveAccount
                    : "无收款账号"
                }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "caseAccountSettles",
  data() {
    return {
      dataList: [],
      effectOrder: 1,
      invalidOrder: 2,
      activeKey: "1",
      curIdx: "balance",
      curIdx1: "balance",
      btns: [
        {
          label: "结算至余额",
          value: "balance",
        },
        {
          label: "结算至微信零钱",
          value: "wechat",
        },
        {
          label: "结算至支付宝账户",
          value: "ali",
        },
        // {
        //   label: "结算至银行卡",
        //   value: 3,
        // },
      ],
      btns1: [
        {
          label: "微信APP",
          value: "wx_app",
        },
        {
          label: "微信JSAPI支付",
          value: "wx_js",
        },
        {
          label: "微信小程序",
          value: "wx_lite",
        },
      ],
      curSettleType: "balance",
      curSettleType1: "balance",
      info: {},
    };
  },
  created() {
    console.log(this.$route.query.ids);
    if (this.$route.query.ids) {
      this.getSettleInfo();
    }
    // if (!this.commandForm.channel) {
    //   this.payChannelTypeList = [{ label: "所有", value: "" }];
    // }
    // this.getChannelList();
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.handleTab();
        }
      },
    },
    deep: true,
  },
  methods: {
    submit() {
      if (this.info.validSummary.length) {
        this.$http
          .post("/api/royalty/settlement", {
            ...this.info,
            channel: this.curSettleType,
            type: this.curSettleType1,
          })
          .then((res) => {
            if (res.code === "0000") {
              console.log(res.data)
            }
          });
      } else {
        this.$message.error("暂无有效订单");
      }
    },
    getSettleInfo() {
      this.$http
        .post("/api/royalty/settlementInfo", {
          royaltyIds: JSON.parse(this.$route.query.ids),
          channel: this.curSettleType,
          type: this.curSettleType1,
        })
        .then((res) => {
          if (res.code === "0000") {
            this.info = res.data;
            this.effectOrder = this.info.validSummary?.length || 0;
            this.invalidOrder = this.info.invalidSummary?.length || 0;
            this.dataList = this.info.validSummary;
          }
        });
    },
    tabClick() {
      console.log(this.activeKey);
      if (this.activeKey == "2") {
        this.dataList = this.info.invalidSummary;
      } else {
        this.dataList = this.info.validSummary;
      }
    },
    goBack() {
      this.$backTo(`/caseAccount/caseAccountDetails`);
    },
    btnChange(item, idx) {
      this.curIdx = item.value;
      this.curSettleType = item.value;
      if (item.value == "balance" || item.value == "ali") {
        this.curSettleType1 = item.value;
        this.getSettleInfo();
      }
    },
    btnChange1(item, idx) {
      this.curIdx1 = item.value;
      this.curSettleType1 = item.value;
      this.getSettleInfo();
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.el-tabs__item) {
  width: 130px;
}
.total {
  background: #f8fafc;
  border-radius: 4px;
  border: 1px solid #f0f5f8;
  padding: 10px 20px;
  div {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #869daa;
    line-height: 40px;
  }
}
.actived {
  border: 1px solid #03bfc6;
  background: rgba(3, 191, 198, 0.03);
  color: #03bfc6;
}

.cardTit {
  font-size: 18px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  color: #4f595f;
}
.top-command {
  display: flex;
  justify-content: space-between;
  margin-bottom: 23px;
  .tit {
    font-size: 24px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #1d1c1c;
  }
}
.width512 {
  width: 400px;
}
.cardDialog {
  .addTitle {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
  .tip {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 12px;
    margin-bottom: 30px;
    span {
      color: #03bfc6;
    }
  }
  .tip1 {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #869daa;
    // line-height: 17px;
  }
  :deep(.el-form-item--small.el-form-item:nth-of-type(2)) {
    margin-bottom: 0;
  }
  :deep(.el-dialog) {
    border-radius: 16px;
  }
  :deep(.el-dialog__body) {
    padding: 10px 40px;
    padding-bottom: 60px;
  }
  :deep(.el-button--small) {
    width: 74px;
  }
  :deep(.el-input__inner) {
    padding-left: 12px;
  }
  :deep(.el-form-item__content) {
    position: relative;
  }

  .form-img {
    width: 22px;
    border-radius: 22px;
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 1;
  }
}
.switch {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ml {
  margin-left: 50px;
}
</style>
